<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript" src="static/js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="static/js/jquery.PrintArea.js"></script>
<style type="text/css">
.checkbox { 
position: relative;
}

.printButton{
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 1.0em;
    text-transform: uppercase;
    padding: 1px 5px;
    left: 50%;
    width: 80px;
    margin-left: 10px;
    top: 50%;
    border-radius: 10px;
    color: white;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.8);
    border: 5px solid transparent;
    border-bottom-color: rgba(0,0,0,0.35);
    background: #00B2EE;
    cursor: pointer;
    animation: pulse 1s infinite alternate;
    transition: background 0.4s, border 0.2s, margin 0.2s;
}
</style>
<script type="text/javascript">
//将中文进行转码
function utf16to8(str) {  
    var out, i, len, c;  
    out = "";  
    len = str.length;  
    for(i = 0; i < len; i++) {  
    c = str.charCodeAt(i);  
    if ((c >= 0x0001) && (c <= 0x007F)) {  
        out += str.charAt(i);  
    } else if (c > 0x07FF) {  
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
        out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    } else {  
        out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    }  
    }  
    return out;  
}

//定义一个打印数组将要打印的对象添加到数组中
var printList = new Array();

/*
  将要打印的对象添加到数组中
 id  用于标识对象(删除时可按id删除)
 name 可用于描述对象
 context 具体信息(将会转换成二维码)
 */
function addprint(id,name,context){
	
	//定义一个二维码对象
	var prinDiv = $("<div style='width: 170px;text-align: center;float: left;margin:10px 20px 10px 20px'>");
	//二维码name
	var textDiv = $("<div><label>编号："+id+",名称："+name+"</label></div>");
	//二维码图片
	var QRdiv=$("<div style='text-align: center;float: left;margin:10px 20px 10px 20px'></div>");
	//生成二维码
	var qrcode = jQuery(QRdiv).qrcode({
    	render: "canvas", //也可以替换为table
    	width: 130,
    	height: 130,
    	text: utf16to8(context)
	});
	//将名字和图片的div添加到二维码对象div中
	$(prinDiv).append(textDiv);
	$(prinDiv).append(QRdiv);
	
	//printarea无法打印canvas,将canvas转为img
	qrcode.find('canvas').hide();   
	var canvas=qrcode.find('canvas').get(0);
	var img = $("<img />");
	$(img).attr('src',canvas.toDataURL('image/jpg'));
	$(canvas).parent().append(img);
	
	//创建对象
	var print = {id:id,parentdiv:prinDiv};
	
	//获取当前点击的复选框
	var checkbox =  document.getElementById("checkbox_"+id);
	if(!checkbox.checked){
		//如果没有选择，则勾选
		checkbox.checked = true;
		//将对象添加到待打印数组
		printList.push(print);
	}else{
		//如果选择，则去掉勾选
		checkbox.checked = false;
		//将对象从待打印数组移除
		printList.splice($.inArray(print, printList), 1);
		
	}
	
	//console.log(printList);
	//console.log(printList.length);
	
}

$(function(){
	$("#getPrint1").click(function(){
		console.log($("input[name='print']:checked").parent().text());
	});
	
	//全选事件
	$("#all").change(function(){
		printList = [];
		if(!this.checked){
			$("input[name='print']").attr("checked","true");
		}else{
			$("input[name='print']").removeAttr("checked");
		}
		$("div[name='qrcode']").trigger('click');
	});
	
	//打印点击事件
	$("#getPrint").click(function(){
		
		var len = printList.length;
		if(len==0){
			alert("至少选择一个二维码！");
			return false;
		}
		
		
		//创建一个div
		var myPrintDiv = $("<div></div>");
		//将二维码待打印数组添加到myPrintDiv
		$(printList).each(function(n,e){
			$(myPrintDiv).append(e.parentdiv);
		});
		//显示打印窗口
		$(myPrintDiv).printArea();
	});
	
});


</script>
</head>
<body>
<div  style="text-align: center;margin: 20px 0 20px 0">
<label><input type="checkbox" id="all"> 全选</label> <input id="getPrint" type="button" class="printButton" value="打印" />
</div>
<c:forEach items="${equipmentList}" var="equipment">
	<div name="qrcode" onclick="addprint('${equipment.id}','${equipment.equipName}','编号：${equipment.id},名称：${equipment.equipName},设备类型：${equipment.equipType}')" style="width: 200px;text-align: center;float: left;margin:10px 20px 10px 20px">
		<div><label><input id="checkbox_${equipment.id}" type="checkbox" disabled="disabled" style="position:absolute;z-index:-1;" class="check-box"  name="print"/><lable style="margin-left: 30px;" >编号：${equipment.id},类型：${equipment.equipType}</lable></label></div>
		<div name="${equipment.id}" style="margin-top: 10;"></div>
		<script type="text/javascript">
			var qrcode = jQuery("div[name=${equipment.id}]").qrcode({
		    	render: "canvas", //也可以替换为table
		    	width: 130,
		    	height: 130,
		    	correctLevel:0,
		    	text: utf16to8("编号：${equipment.id}\n"+
	    				   "名称：${equipment.equipName}\n"+
	    			       "设备类型：${equipment.equipType}\n"+
	    			       "所属实验室:${equipment.laboratory.labName}\n"+
	    			       "厂商:${equipment.manufacturer}\n"+
	    			       "生产日期:${equipment.manufactureDate}\n"+
	    			       "保修日期:${equipment.repairDate}")
			});
			
			//默认使用Canvas生成，并显示到图片  
			qrcode.find('canvas').hide (); 
			var canvas=qrcode.find('canvas').get(0);
			var img = $("<img />");
			$(img).attr('src',canvas.toDataURL('image/jpg'));
			$(canvas).parent().append(img);
			
		</script>
	</div>
</c:forEach>
<div style="clear: left;">
</div>

</body>

</html>
